<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .login-container {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 1.5rem;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #666;
        }
        
        input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        button {
            width: 100%;
            padding: 0.75rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
        }
        
        button:hover {
            background-color: #0056b3;
        }
        
        p {
            text-align: center;
            margin-top: 1rem;
        }
        
        a {
            color: #007bff;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        .login-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }
        
        .login-tab {
            padding: 0.5rem 1rem;
            margin: 0 0.5rem;
            cursor: pointer;
            color: #666;
            border-bottom: 2px solid transparent;
        }
        
        .login-tab.active {
            color: #007bff;
            border-bottom: 2px solid #007bff;
        }
        
        .login-form {
            display: none;
        }
        
        .login-form.active {
            display: block;
        }
        
        .code-input-group {
            display: flex;
            gap: 10px;
        }
        
        .code-input-group input {
            flex: 1;
        }
        
        .get-code-btn {
            width: 120px;
            background-color: #28a745;
        }
        
        .get-code-btn:hover {
            background-color: #218838;
        }
        
        .get-code-btn:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        
        <!-- 登录方式选项卡 -->
        <div class="login-tabs">
            <div class="login-tab active" data-tab="password-login">密码登录</div>
            <div class="login-tab" data-tab="code-login">验证码登录</div>
        </div>
        
        <!-- 密码登录表单 -->
        <form id="password-login-form" class="login-form active">
            <div class="form-group">
                <label for="username">用户名或手机号：</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名或手机号" required>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <button type="submit">登录</button>
        </form>
        
        <!-- 验证码登录表单 -->
        <form id="code-login-form" class="login-form">
            <div class="form-group">
                <label for="phone">手机号：</label>
                <input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required>
            </div>
            <div class="form-group">
                <label for="verification-code">验证码：</label>
                <div class="code-input-group">
                    <input type="text" id="verification-code" name="verification-code" placeholder="请输入验证码" required>
                    <button type="button" id="get-code-btn" class="get-code-btn">获取验证码</button>
                </div>
            </div>
            <button type="submit">登录</button>
        </form>
        
        <p>还没有账号？<a href="{{ url_for('register') }}">立即注册</a></p>
    </div>
    <script>
        // 切换登录方式
        document.querySelectorAll('.login-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有tab的active类
                document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
                // 给当前tab添加active类
                this.classList.add('active');
                
                // 隐藏所有表单
                document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
                // 显示对应的表单
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId + '-form').classList.add('active');
            });
        });
        
        // 获取验证码倒计时
        let countdown = 60;
        let timer = null;
        const getCodeBtn = document.getElementById('get-code-btn');
        
        function startCountdown() {
            getCodeBtn.disabled = true;
            getCodeBtn.textContent = `${countdown}秒后重新获取`;
            
            timer = setInterval(() => {
                countdown--;
                if (countdown > 0) {
                    getCodeBtn.textContent = `${countdown}秒后重新获取`;
                } else {
                    clearInterval(timer);
                    getCodeBtn.textContent = '获取验证码';
                    getCodeBtn.disabled = false;
                    countdown = 60;
                }
            }, 1000);
        }
        
        // 获取验证码事件
        getCodeBtn.addEventListener('click', async () => {
            const phone = document.getElementById('phone').value.trim();
            
            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入有效的手机号码');
                return;
            }
            
            try {
                const response = await fetch('{{ url_for("send_verification_code") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ phone, type: 'login' })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    alert('验证码已发送，请查收');
                    startCountdown();
                    // 调试模式：显示验证码
                    if (data.debug_code) {
                        console.log('验证码：', data.debug_code);
                        // 可以选择在页面上显示验证码（仅测试环境）
                        document.getElementById('verification-code').value = data.debug_code;
                    }
                } else {
                    alert(data.message || '发送验证码失败');
                }
            } catch (error) {
                console.error('发送验证码错误:', error);
                alert('发送验证码时发生错误，请稍后重试');
            }
        });
        
        // 密码登录表单提交
        document.getElementById('password-login-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            
            // 验证输入
            if (!username) {
                alert('请输入用户名或手机号');
                return;
            }
            
            if (!password) {
                alert('请输入密码');
                return;
            }
            
            try {
                const response = await fetch('{{ url_for("login") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    window.location.href = data.redirect;
                } else {
                    alert(data.message || '登录失败，请检查用户名/手机号和密码');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录时发生错误，请稍后重试');
            }
        });
        
        // 验证码登录表单提交
        document.getElementById('code-login-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const phone = document.getElementById('phone').value.trim();
            const code = document.getElementById('verification-code').value.trim();
            
            // 验证输入
            if (!phone) {
                alert('请输入手机号码');
                return;
            }
            
            if (!code) {
                alert('请输入验证码');
                return;
            }
            
            try {
                const response = await fetch('{{ url_for("login") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username: phone, code })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    window.location.href = data.redirect;
                } else {
                    alert(data.message || '登录失败，请检查手机号和验证码');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert('登录时发生错误，请稍后重试');
            }
        });
    </script>
</body>
</html> 